<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="./logo.jpg">
    <title>三宝果卉重置密码</title>
    <style type="text/css">
        p {
            margin-bottom: 0;
        }

        .divForm {
            position: absolute;
            /*绝对定位*/
            width: 430px;
            height: 316px;

            /* border: 1px solid red; */
            text-align: center;
            /*(让div中的内容居中)*/
            left: 50%;
            top: 50%;
            margin-top: -200px;
            margin-left: -200px;
            background-color: aliceblue;
        }

        .input1 {
            width: 150px;
            height: 30px;
            font-size: 16px;
        }

        .input2 {
            width: 300px;
            height: 25px;
        }

        .p1 {
            height: 25px;
            margin: 0;
            padding: 0;
            color: red;
        }
    </style>
</head>

<body style="text-align: center;background-size:100%;" background="./1st.jpg">
<div class="divForm">
    <form action="http://localhost/rjbAdmin/updateOne" method="post" onsubmit="return tj()">
        <h2>重置密码</h2>
        <br>
        <p>
            输入密码：<input type="password" name="password" class="input2"/>
        </p>
        <p class="p1"></p>
        <p>
            确认密码：<input type="password" name="password" class="input2"/>
        </p>
        <p class="p1"></p>
        <input type="submit" value="提交" class="input1"/>
    </form>
</div>

<script>
    var psd1 = '';

    function ps1(inp) {
        let psd = inp.value;
        if (psd != null && psd.length > 6 && psd !== '') {
            psd1 = psd;
            document.getElementsByClassName("p1")[0].innerHTML = '';
            return true;
        } else {
            document.getElementsByClassName("p1")[0].innerHTML = "密码不符合规范";
        }
        return false;
    }

    function ps2(inp) {
        let psd = inp.value;
        if (psd != null && psd !== '' && psd === psd1) {
            document.getElementsByClassName("p1")[1].innerHTML = '';
            return true;
        } else {
            document.getElementsByClassName("p1")[1].innerHTML = "两次密码不一致";
        }
        return false;
    }

    function tj() {
        if (ps1(document.getElementsByName("password")[0]) && ps2(document.getElementsByName("password")[1])) {
            let myJson = {
                "aid": getQueryVariable("id"),
                "username": getQueryVariable("name"),
                "password": document.getElementsByName("password")[1].value,
            };
            myPost(myJson);
        }
        return false;
    }

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function myPost(obj) {
        var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
        httpRequest.open('POST', 'http://127.0.0.1:8090/rjbAdmin/updateOne', true); //第二步：打开连接/***发送json格式文件必须设置请求头 ；如下 - */
        httpRequest.setRequestHeader("Content-type", "application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）var obj = { name: 'zhansgan', age: 18 };
        httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
                var json = httpRequest.responseText;//获取到服务端返回的数据
                alert("修改成功，请放回登录");
                window.location.href = 'index.html';
            }
        };
    }

    window.onload = function () {
        let psd = document.getElementsByName("password");

        // 给第一个密码框绑定失去焦点事件
        psd[0].onblur = function () {
            ps1(this);
        }

        // 给第二个密码框绑定失去焦点事件
        psd[1].onblur = function () {
            ps2(this);
        }
    }

</script>
</body>

</html>
